<template>
  <div style="width:76%; " class="f-tag-list">

    <el-tabs v-model="activeTab" type="card" class="flex-1" style="min-width: 100px" @tab-change="changeTab" 
      @tab-remove="removeTab">
      <el-tab-pane v-for="item in tabList" :key="item.path" :label="item.title" :name="item.path"
        :closable="item.path !== '/'">
        <!-- <router-view></router-view> -->
        <!-- {{ item.content }} -->
      </el-tab-pane>
    </el-tabs>
    <div class="ml-auto tag-btn float-right ">
      <el-dropdown @command="handleClose">
        <span class="el-dropdown-link">

          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="clearOtherTag">关闭其他</el-dropdown-item>
            <el-dropdown-item command="clearAllTag">全部关闭</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
     
    </div>
   
  </div>
  <div style="height: 44px;"></div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { useCookies } from '@vueuse/integrations/useCookies'
import router from '../../router/index.js'
const route = useRoute();
const cookie = useCookies();
const activeTab = ref(route.path)
const tabList = ref([
  {
    title: '首页',
    path: '/',
  },


])
const changeTab = (path) => {
  console.log(path)
  router.push(path)
}
const addTab = (tab) => {
  let noTab = tabList.value.findIndex(item => item.path === tab.path) == -1
  if (noTab) {
    tabList.value.push(tab)
  }
  console.log(tabList.value)
  cookie.set('tabList', tabList.value)

}
const handleClose = (c) => {
  // console.log(c)
  if (c == 'clearOtherTag') {
    tabList.value = tabList.value.filter(item => item.path === "/"||item.path === activeTab.value)
  } else if (c == 'clearAllTag') {
    tabList.value = tabList.value.filter(item => item.path === '/')
  }
  cookie.set('tabList', tabList.value)
}
function initTabList() {
  let tabs = cookie.get('tabList')
  // console.log(tabList);
  if (tabs) {
    tabList.value = tabs
  }
}
initTabList()
onBeforeRouteUpdate((to, path) => {
  activeTab.value = to.path
  addTab({
    title: to.meta.title,
    path: to.path

  })
})
const removeTab = (targetName) => {
  let tabs = tabList.value;
  let activeName = activeTab.value;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.path === targetName) {
        let nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeTab.value = nextTab.path;
        }
      }
    });
  }
  tabList.value = tabs.filter(tab => tab.path !== targetName);
  cookie.set('tabList', tabList.value)
};


</script>
<style scoped>
/deep/ .el-tabs--card>.el-tabs__header {
  border-bottom: none;
}
/deep/.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border:none !important;
}
/deep/ .el-tabs__item {
  border-bottom: 1px solid #ebeef5 !important;
  background: #fff;
  margin-right: 10px;
}

.tag-btn {
  height: 32px;
  @apply absolute left-285;
  cursor: pointer;
}
.f-tag-list{
    @apply fixed right-0 flex items-center px-2 bg-gray-100;
    top: 72px;
    left: 310px;
    height: 44px;
    z-index: 100;
}
</style>